<%@page language="java" contentType="text/html; charset=UTF-8" pageEncoding="utf-8" %>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
    <%--http://localhost:8080/atcrowdfunding02_admin_webui_war_exploded/test/ssm.html--%>
    <base href="http://${pageContext.request.serverName}:${pageContext.request.serverPort}${pageContext.request.contextPath}/">

    <script type="text/javascript" src="jquery/jquery-2.1.1.min.js"></script>
    <script type="text/javascript" src="layer/layer.js"></script>
    <script type="text/javascript">
        $(function () {
            $("#btn1").click(function () {
                // 只有在服务器端成功处理请求后，即响应状态码是200，才能去执行回调函数
                //$.get(URL,callback);
                //$.post(URL,data,callback);
                $.ajax({
                    "url": "send/array/one.html",			// 请求目标资源的地址
                    "type": "post",						// 请求方式
                    traditional: true,//防止深度序列化
                    "data": {							// 要发送的请求参数
                        "array": [5, 8, 12]
                    },
                    "dataType": "text",					// 如何对待服务器端返回的数据
                    "success": function (response) {		// 服务器端成功处理请求后调用的回调函数，response是响应体数据
                        alert(response);
                    },
                    "error": function (response) {		// 服务器端处理请求失败后调用的回调函数，response是响应体数据
                        alert(response);
                    }
                });
            });

            $("#btn4").click(function () {

                // 准备要发送的数据
                var student = {
                    "stuId": 5,
                    "stuName": "tom",
                    "address": {
                        "province": "广东",
                        "city": "深圳",
                        "street": "后瑞"
                    },
                    "subjectList": [
                        {
                            "subjectName": "JavaSE",
                            "subjectScore": 100
                        }, {
                            "subjectName": "SSM",
                            "subjectScore": 99
                        }
                    ],
                    "map": {
                        "k1": "v1",
                        "k2": "v2"
                    }
                };

                // 将JSON对象转换为JSON字符串
                var requestBody = JSON.stringify(student);

                // 发送Ajax请求
                $.ajax({
                    "url": "send/compose/object.json",   // 请求目标资源的地址
                    "type": "post",                      // 请求方式
                    "data": requestBody,                 // 请求体
                    "contentType": "application/json;charset=UTF-8",// 设置请求体的内容类型，告诉服务器端本次请求的请求体是JSON数据
                    "dataType": "json",                  // 如何对待服务器端返回的数据
                    "success": function (response) {       // 服务器端成功处理请求后调用的回调函数，response是响应体数据
                        console.log(response);
                    },
                    "error": function (response) {         // 服务器端处理请求失败后调用的回调函数，response是响应体数据
                        console.log(response);
                    }
                });

            });

            $("#btn5").click(function () {
                alert("弹窗");/*alert弹窗是有声音的*/
                layer.msg("Layer的弹窗")
            });
        });
    </script>
</head>
<body>
<h2>Hello World!</h2>

<%--使用绝对路径 ${pageContext.request.contextPath}这个EL表达式已经是以/开头了--%>
<%--<a href="${pageContext.request.contextPath}/test/ssm.html">测试SSM整合环境</a>--%>

<%-- 用base标签则不能用/斜杠开头 --%>
<a href="test/ssm.html">测试SSM整合环境</a>
<br/><br/>
<button id="btn1">Send [5,8,12] one</button>
<br/><br/>
<button id="btn4">Send Compose Object</button>

<br/><br/>
<button id="btn5">点我弹窗</button>
</body>
</html>
